:root {
    --btn-padding-y-sm: 0.375rem;
}

// This class is meant for clickable icons. It is NOT meant for buttons with icons in it or for nav
// items.
.btn-icon {
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    border: none;
    cursor: pointer;

    .icon {
        @extend .icon-inline;
    }

    &:focus-visible:not(:disabled):not(.disabled) {
        box-shadow: 0 0 0 2px rgba($primary, 0.5);
    }

    &:hover:not(:disabled):not(.disabled) {
        color: var(--body-color);
    }
}

@mixin button-variant(
    $name,
    $base-color,
    $light-color-variant,
    $dark-color-variant,
    $text-color: var(--light-text),
    $disabled-text-color: var(--light-text)
) {
    .btn-#{$name} {
        color: $text-color;
        border-color: $base-color;
        background-color: $base-color;

        &.disabled,
        &:disabled {
            opacity: 1;
            background-color: $light-color-variant;
            border-color: $light-color-variant;
            color: $disabled-text-color;
        }

        &:not(:disabled):not(.disabled) {
            &:hover:not(.focus):not(:focus) {
                color: $text-color;
                background-color: $dark-color-variant;
            }

            &:focus,
            &.focus,
            &:active,
            &.active {
                color: $text-color;
                background-color: $base-color;
                border-color: var(--body-bg);

                @at-root #{selector-append('.theme-light')} & {
                    box-shadow: 0 0 0 2px $light-color-variant;
                }
                @at-root #{selector-append('.theme-dark')} & {
                    box-shadow: 0 0 0 2px $dark-color-variant;
                }
            }
        }
    }

    .show > .btn-#{$name}.dropdown-toggle {
        color: $text-color;
        background-color: $base-color;
        border-color: var(--body-bg);

        @at-root #{selector-append('.theme-light')} & {
            box-shadow: 0 0 0 2px $light-color-variant;
        }
        @at-root #{selector-append('.theme-dark')} & {
            box-shadow: 0 0 0 2px $dark-color-variant;
        }
    }

    .btn-outline-#{$name} {
        color: var(--body-color);
        border-color: $base-color;
        background-color: transparent;

        &.disabled,
        &:disabled {
            opacity: 1;
            color: var(--text-disabled);
            border-color: $light-color-variant;
        }

        &:not(:disabled):not(.disabled) {
            // Set inlined icons to match outline border
            svg {
                fill: $base-color;
            }

            &:hover:not(.focus):not(:focus) {
                background-color: var(--color-bg-1);
                @at-root #{selector-append('.theme-light')} & {
                    color: $dark-color-variant;
                    border-color: $dark-color-variant;

                    svg {
                        fill: $dark-color-variant;
                    }
                }
                @at-root #{selector-append('.theme-dark')} & {
                    color: $base-color;
                    border-color: $base-color;
                }
            }

            &:focus,
            &.focus,
            &:active,
            &.active {
                color: var(--body-color);
                border-color: var(--body-bg);
                background-color: var(--body-bg);

                @at-root #{selector-append('.theme-light')} & {
                    box-shadow: 0 0 0 2px $light-color-variant;
                }

                @at-root #{selector-append('.theme-dark')} & {
                    box-shadow: 0 0 0 2px $dark-color-variant;
                }
            }
        }
    }

    .show > .btn-outline-#{$name}.dropdown-toggle {
        color: var(--body-color);
        border-color: var(--body-bg);
        background-color: var(--body-bg);
        @at-root #{selector-append('.theme-light')} & {
            box-shadow: 0 0 0 2px $light-color-variant;
        }
        @at-root #{selector-append('.theme-dark')} & {
            box-shadow: 0 0 0 2px $dark-color-variant;
        }
    }
}

@include button-variant(
    $name: 'primary',
    $base-color: var(--primary),
    $light-color-variant: var(--primary-2),
    $dark-color-variant: var(--primary-3)
);

@include button-variant(
    $name: 'secondary',
    $base-color: var(--secondary),
    $light-color-variant: var(--secondary-2),
    $dark-color-variant: var(--secondary-3),
    // Use darker text colors for contrast
    $text-color: var(--body-color),
    $disabled-text-color: var(--text-disabled)
);

@include button-variant(
    $name: 'success',
    $base-color: var(--success),
    $light-color-variant: var(--success-2),
    $dark-color-variant: var(--success-3)
);

@include button-variant(
    $name: 'danger',
    $base-color: var(--danger),
    $light-color-variant: var(--danger-2),
    $dark-color-variant: var(--danger-3)
);

@include button-variant(
    $name: 'warning',
    $base-color: var(--warning),
    $light-color-variant: var(--warning-2),
    $dark-color-variant: var(--warning-3),
    // Use darker text colors for contrast
    $text-color: var(--dark-text),
    $disabled-text-color: var(--text-disabled)
);

@include button-variant(
    $name: 'info',
    $base-color: var(--info),
    $light-color-variant: var(--info-2),
    $dark-color-variant: var(--info-3),
    // Use darker text colors for contrast
    $text-color: var(--dark-text),
    $disabled-text-color: var(--text-disabled)
);

@include button-variant(
    $name: 'merged',
    $base-color: var(--merged),
    $light-color-variant: var(--merged-2),
    $dark-color-variant: var(--merged-3)
);

.btn {
    // Use placeholder-selector to extend only styles defined for `label`.
    @extend %label-base;
}

.btn.btn-sm {
    @extend %label-base-small;
}

// Label / Uppercase / Base
.btn.text-uppercase {
    @extend %label-uppercase;

    // Label / Uppercase / Small
    &.btn-sm {
        font-size: 0.6875rem;
        @extend %label-uppercase;
    }
}

.theme-dark,
.theme-light {
    // btn-secondary needs specific styles to ensure good contrast
    .btn-secondary,
    .btn-outline-secondary {
        &.disabled,
        &:disabled {
            border-color: var(--input-disabled-bg);
        }

        &:not(:disabled):not(.disabled) {
            &:hover:not(.focus):not(:focus) {
                color: var(--body-color);

                svg {
                    fill: var(--icon-color);
                }
            }

            &:focus,
            &.focus,
            &:active,
            &.active {
                box-shadow: 0 0 0 2px var(--primary-2);
            }

            svg {
                fill: var(--icon-color);
            }
        }
    }
}
